// webpack的配置文件
// webpack的配置文件是node文件，遵循commonjs规范
const path = require("path");
// 插件是安装好之后需要引入的
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入vue的插件
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  // 设置打包的环境
  mode: "production",

  // 配置入口文件
  entry: "./src/main.js",

  // 配置出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },

  // loader 转换器
  // webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
  module: {
    // 转换器都是写在rules数组里面的
    // 里面的每一项就是一个转换的规则
    rules: [
      {
        test: /\.css$/i,
        // 使用转换器的时候，需要将先用到的转换器写在后面
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },

  // 插件(plugin)
  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
  // plugins数组里面的每一项就是要用到的一个插件
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/public/index.html"),
      filename: "./index.html",
    }),
    new VueLoaderPlugin(),
  ],

  devServer: {
    port: 5173,
    open: true,
    // 做反向代理，用于解决跨域
    proxy: {
      // path的第一段
      "/api": {
        // target是协议和域名
        target: "https://i.maoyan.com",
        changeOrigin: true,
      },
    },
  },

  // 配置的内容都是可以直接写在最外层
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
      pa: path.resolve(__dirname, "src/pages/"),
    },
    extensions: [".js", ".json", ".wasm", ".vue"],
  },
};
